﻿@import '../../Site/Styles/_variaveis.scss';
@import '../../Site/Styles/_mixins.scss';

@media only screen and (min-width: 1933px) {
    #articleLogin {
        float: left;
        margin-top: 50px;
        margin-left: calc(50% - 350px);
        min-height: 200px;
        width: 800px;
        font-size: 40px;

        .TextboxLogin {
            height: 80px;
            width: 600px;
            padding-left: 80px;
            font-family: $font;
            font-size: 30px;
            border: 1px solid $background_header;
        }

        #imgEmail, #imgSenha {
            position: relative;
            top: 17px;
            left: -685px;
            height: 55px;
        }

        #btnLogar, #btnCadastrar {
            margin-top: 20px;
            height: 70px;
            width: 200px;
            font-family: $font;
            font-size: 30px;
            background: white;
            border: 1px solid $background_header;
        }

        .Grey {
            font-size: 40px;
        }

        #btnCadastrar {
            width: 500px;
        }
    }
}

@media only screen and (max-width: 1932px) and (min-width: 1455px) {
    #articleLogin {
        float: left;
        margin-top: 50px;
        margin-left: calc(50% - 350px);
        min-height: 200px;
        width: 800px;
        font-size: 40px;

        .TextboxLogin {
            height: 80px;
            width: 600px;
            padding-left: 80px;
            font-family: $font;
            font-size: 30px;
            border: 1px solid $background_header;
        }

        #imgEmail, #imgSenha {
            position: relative;
            top: 17px;
            left: -685px;
            height: 55px;
        }

        #btnLogar, #btnCadastrar {
            margin-top: 20px;
            height: 70px;
            width: 200px;
            font-family: $font;
            font-size: 30px;
            background: white;
            border: 1px solid $background_header;
        }

        .Grey {
            font-size: 40px;
        }

        #btnCadastrar {
            width: 500px;
        }
    }
}

@media only screen and (max-width: 1454px) and (min-width: 1040px) {
    #articleLogin {
        float: left;
        margin-top: 50px;
        margin-left: calc(50% - 300px);
        min-height: 200px;
        width: 650px;
        font-size: 35px;

        .TextboxLogin {
            height: 70px;
            width: 500px;
            padding-left: 70px;
            font-family: $font;
            font-size: 26px;
            border: 1px solid $background_header;
        }

        #imgEmail, #imgSenha {
            position: relative;
            top: 17px;
            left: -575px;
            height: 55px;
        }

        #btnLogar, #btnCadastrar {
            margin-top: 20px;
            height: 60px;
            width: 200px;
            font-family: $font;
            font-size: 26px;
            background: white;
            border: 1px solid $background_header;
        }

        .Grey {
            font-size: 35px;
        }

        #btnCadastrar {
            width: 500px;
        }
    }
}

@media only screen and (max-width: 1039px) and (min-width: 870px) {
    #articleLogin {
        float: left;
        margin-top: 50px;
        margin-left: calc(50% - 250px);
        min-height: 200px;
        width: 550px;
        font-size: 26px;

        .TextboxLogin {
            height: 60px;
            width: 425px;
            padding-left: 55px;
            font-family: $font;
            font-size: 20px;
            border: 1px solid $background_header;
        }

        #imgEmail, #imgSenha {
            position: relative;
            top: 10px;
            left: -480px;
            height: 40px;
        }

        #btnLogar, #btnCadastrar {
            margin-top: 20px;
            height: 50px;
            width: 200px;
            font-family: $font;
            font-size: 22px;
            background: white;
            border: 1px solid $background_header;
        }

        .Grey {
            font-size: 26px;
        }

        #btnCadastrar {
            width: 480px;
        }
    }
}

@media only screen and (max-width: 869px) and (min-width: 500px) {
    #articleLogin {
        float: left;
        margin-top: 50px;
        margin-left: calc(50% - 200px);
        min-height: 200px;
        width: 450px;
        font-size: 20px;

        .TextboxLogin {
            height: 50px;
            width: 325px;
            padding-left: 40px;
            font-family: $font;
            font-size: 18px;
            border: 1px solid $background_header;
        }

        #imgEmail, #imgSenha {
            position: relative;
            top: 10px;
            left: -370px;
            height: 30px;
        }

        #btnLogar, #btnCadastrar {
            margin-top: 20px;
            height: 40px;
            width: 150px;
            font-family: $font;
            font-size: 20px;
            background: white;
            border: 1px solid $background_header;
        }

        .Grey {
            font-size: 20px;
        }

        #btnCadastrar {
            width: 365px;
        }
    }
}

@media only screen and (max-width: 499px) and (min-width: 200px) {
    #articleLogin {
        float: left;
        margin-top: 50px;
        min-height: 200px;
        width: 100%;
        font-size: 20px;
        background: red !important;

        .TextboxLogin {
            height: 50px;
            width: 280px;
            font-family: $font;
            font-size: 18px;
            border: 1px solid $background_header;
        }

        #imgEmail, #imgSenha {
            display: none;
        }

        #btnLogar, #btnCadastrar {
            margin-top: 20px;
            height: 40px;
            width: 150px;
            font-family: $font;
            font-size: 20px;
            background: white;
            border: 1px solid $background_header;
        }

        .Grey {
            font-size: 20px;
        }

        #btnCadastrar {
            width: 365px;
        }
    }

}